<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Shorp.php@jquerymobile Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<style type="text/css">
body {
	margin: auto;
}

#ptop{
	display:block;
	margin:auto;
}

#portrait {
	display:block;
	margin:auto;
	height: 436px;
	width: 320px;
	border: 6px black solid;
	border-top: none;
}

</style>
</head>
<body>
<h3 style="text-align:center;">Shorp.php@jquerymobile Demo (prototyping)</h3>
<hr/>
<div style="margin: 16px;">
	<div style="float:left;">
		<table id="simulator">
			<tr><td>
			<img alt="HVGA top" src="img/HVGAPTop.png" id="ptop"/>
			<iframe id="portrait" src="mobile/" scrolling="no"></iframe>
			</td></tr>
		</table>
	</div>
	<div style="margin-left:360px;">
		<h4 style="text-align:left;">
		Shorp Code:
		</h4>
		<pre name="src" id="src" style="height:460px;position:relative;border: solid 1px gray;">Loading demo...</pre>
		<div style="text-align:center;"><button id="run">Interpret to Jquery Mobile</button></style>
	</div>
</div>

<br/><hr/>
<div style="text-align:center">
Visit <a href="http://code.google.com/p/shorp/">http://code.google.com/p/shorp/</a>
</div>

<script src="../ace/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../ace/src/theme-eclipse.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../ace/src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
var editor;
window.onload = function() {
	editor = ace.edit("src");
	editor.setTheme("ace/theme/eclipse");
    
    //var JavaScriptMode = require("ace/mode/javascript").Mode;
    //editor.getSession().setMode(new JavaScriptMode());
};
</script>

<script type="text/javascript">
(function( $, undefined ) {
    $.get('demo.txt', function(data) {
	    if(editor){
	        editor.getSession().setValue(data);
	    }else{
	        $('#src').text(data);
	    }	    
	    
	    $('#run').click(function(e){
		    var code;
		    if(editor){
			    code = editor.getSession().getValue();
		    }else{
			    code = $('#src').text();
		    }
		    var url = "mobile/?src=" + encodeURIComponent(code);
		    $('#portrait').attr("src", url);
	    }).click();
	});	
}(jQuery));
</script>
</body>
</html>
